<template>
    <a-card :bordered="false">
        <!-- table区域-begin -->
        <div class="table-page-search-wrapper">
            <h2 class="text-center  margin-bottom">{{title}}</h2>

            <a-form layout="inline" @keyup.enter.native="searchQuery">
                <a-row :gutter="24">

                    <a-col :md="6" :sm="24">
                        <a-form-item label="提交时间">
                            <a-range-picker
                                    :placeholder="['开始时间', '结束时间']"
                                    v-model="rangeTime"
                                    format="YYYY-MM-DD"
                                    @change="handleDateChange"
                            />
                        </a-form-item>
                    </a-col>

                    <a-col :md="6" :sm="24">
                        <a-form-item label="机构名称">
                            <a-input v-model="queryParam.customerName" placeholder="机构名称"/>
                        </a-form-item>
                    </a-col>

                    <a-col :md="6" :sm="24">
                        <a-form-item label="联系人">
                            <a-input v-model="queryParam.contract" placeholder="联系人"/>
                        </a-form-item>
                    </a-col>

                    <a-col :md="6" :sm="24">
                        <a-form-item label="联系电话">
                            <a-input v-model="queryParam.phone" placeholder="联系电话"/>
                        </a-form-item>
                    </a-col>

                    <a-col :md="6" :sm="24">
                        <a-form-item label="申请类型">
                            <a-select placeholder="申请类型" v-model="queryParam.applyType">
                                <a-select-option value="">全部</a-select-option>
                                <a-select-option value="0">暂停营业申请</a-select-option>
                                <a-select-option value="1">恢复营业申请</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                    <a-col :md="6" :sm="24">
                        <a-form-item label="执行状态">
                            <a-select placeholder="执行状态" v-model="queryParam.applyStatus">
                                <a-select-option value="">全部</a-select-option>
                                <a-select-option value="0">待执行</a-select-option>
                                <a-select-option value="1">执行通过</a-select-option>
                                <a-select-option value="2">执行未通过</a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>

                    <a-col :md="12" :sm="24" v-if="showSelectArea">
                        <a-form-item label="区域查询">
                            <select-area ref="selectAreaRef" @change="changeArea"></select-area>
                        </a-form-item>
                    </a-col>

                </a-row>
            </a-form>
        </div>

        <!-- 操作按钮区域 -->
        <div class="table-operator">
            <a-button type="primary" @click="searchQuery" icon="search">查询数据</a-button>
            <a-button type="primary" @click="resetForm">重置查询</a-button>
        </div>

        <div>
            <a-table
                    ref="table"
                    size="middle"
                    bordered
                    rowKey="id"
                    :columns="columns"
                    :dataSource="dataSource"
                    :pagination="ipagination"
                    :loading="loading"
                    class="j-table-force-nowrap"
                    @change="handleTableChange"
            >
                <template slot="htmlSlot" slot-scope="text">
                    <div v-html="text"></div>
                </template>
                <template slot="imgSlot" slot-scope="text">
                    <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
                    <img v-else :src="text" height="25px" alt style="width: auto;height: 50px;"/>
                </template>
                <template slot="action" slot-scope="text, record">
                    <a class="margin-left-sm" style="color: deepskyblue;" v-if="record.applyStatus == 0"
                       @click="showModal(record,'option')">信息核实</a>
                    <a-divider type="vertical" v-if="record.applyStatus == 0"/>
                    <a class="margin-left-sm" style="color: #a29b9b;" @click="showModal(record,'detail')">
                        详情
                    </a>
                </template>
            </a-table>
        </div>

        <a-modal v-if="editData && (modelName == 'option')"
                 v-model="visible"
                 width="60%"
                 :title="'【'+editData.customerName+'】机构信息审核'"
        >
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :sm="24">
                        <a-form-item label="申请类型">
                            <div v-if="editData.applyType == 0">
                                <span style = 'color:orange;' >暂停营业申请</span>
                            </div>
                            <div v-if="editData.applyType == 1">
                                <span style = 'color:deepskyblue;' >恢复营业申请</span>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="机构名称">
                            <div class="text-white">{{editData.customerName}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="机构编码">
                            <div class="text-white">{{editData.customerNumber || ''}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="负责人姓名">
                            <div class="text-white">{{editData.contract || ''}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="负责人电话">
                            <div class="text-white">{{editData.phone || ''}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="机构地址">
                            <div class="text-white">
                                {{editData.province || ''}}
                                {{editData.city || ''}}
                                {{editData.area || ''}}
                                {{editData.address || ''}}
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24" v-if="editData.applyReamrk">
                        <a-form-item label="申请理由"></a-form-item>
                    </a-col>
                    <a-col :sm="24" v-if="editData.applyReamrk">
                        <div style="color: #aceaf5 !important;font-size: 18px;">
                            {{editData.applyReamrk || ''}}
                        </div>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="信息核实结果说明"></a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-textarea style="width: 100%;" v-model="remark" placeholder="信息核实结果" :rows="4"/>
                    </a-col>
                </a-row>
            </a-form>
            <template slot="footer">
                <a-button key="back" @click="handleCancel">
                    关闭弹窗
                </a-button>
                <a-button type="primary" :loading="loading" @click="handleOk(1)">
                    信息核实通过
                </a-button>
                <a-button type="danger" :loading="loading" @click="handleOk(2)">
                    信息核实未通过
                </a-button>
            </template>
        </a-modal>

        <!-- 详情数据展示 -->
        <a-modal v-if="editData && (modelName == 'detail')"
                 v-model="visible"
                 :title="'【'+editData.customerName+'】机构信息'"
        >
            <a-form layout="inline">
                <a-row :gutter="24">
                    <a-col :sm="24">
                        <a-form-item label="申请类型">
                            <div v-if="editData.applyType == 0">
                                <span style = 'color:orange;' >暂停营业申请</span>
                            </div>
                            <div v-if="editData.applyType == 1">
                                <span style = 'color:deepskyblue;' >恢复营业申请</span>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="执行状态">
                            <div v-if="editData.applyStatus == 0">
                                <span style = 'color:#a5e311;' >待执行</span>
                            </div>
                            <div v-if="editData.applyStatus == 1">
                                <span style = 'color:#057cf5;' >执行通过</span>
                            </div>
                            <div v-if="editData.applyStatus == 2">
                                <span style = 'color:#e9b82e;' >执行未通过</span>
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="机构名称">
                            <div class="text-white">{{editData.customerName}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="机构编码">
                            <div class="text-white">{{editData.customerNumber || ''}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="负责人姓名">
                            <div class="text-white">{{editData.contract || ''}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="负责人电话">
                            <div class="text-white">{{editData.phone || ''}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="机构地址">
                            <div class="text-white">
                                {{editData.province || ''}}
                                {{editData.city || ''}}
                                {{editData.area || ''}}
                                {{editData.address || ''}}
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24" v-if="editData.applyStatus == 0">
                        <a-form-item label="停业时间">
                            <div class="text-white">
                                {{editData.startDate || ''}} - {{editData.endDate || ''}}
                            </div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="申请理由">
                            <div class="text-white">{{editData.applyReamrk || ''}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="申请人">
                            <div class="text-white">{{editData.applyUserName || ''}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="申请时间">
                            <div class="text-white">{{editData.createTime || ''}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="执行人">
                            <div class="text-white">{{editData.optionUserName || ''}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="执行结果">
                            <div class="text-white">{{editData.optionResult || ''}}</div>
                        </a-form-item>
                    </a-col>
                    <a-col :sm="24">
                        <a-form-item label="执行时间">
                            <div class="text-white">{{editData.optionDate || ''}}</div>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
            <template slot="footer">
                <a-button key="back" @click="handleCancel">
                    关闭弹窗
                </a-button>
            </template>
        </a-modal>

    </a-card>
</template>

<script>
    /**
     * create by Jane
     */
    import '@/assets/less/TableExpand.less'
    import { mixinDevice } from '@/utils/mixin'
    import { JeecgListMixin } from '@/mixins/JeecgListMixin'

    import SelectArea from '@/components/Jane/SelectArea'
    import { putAction } from '@/api/manage'

    export default {
        mixins: [mixinDevice,JeecgListMixin],
        components: {
            SelectArea
        },
        data() {
            return {
                title: '机构暂停营业申请列表',
                rangeTime: [],
                queryParam: {
                    creatTimeBegin: null,
                    creatTimeEnd: null,
                    applyStatus : '0',
                },
                /* 数据源 */
                dataSource: [],
                // 表头
                columns: [],

                // 执法人员执行机构暂停营业申请审核
                editData: null,
                visible: false,
                modelName: false,
                remark: '',

                url: {
                    list: "/hc/hcSuspensionOfBusinessApply/list",
                    audit: "/hc/hcSuspensionOfBusinessApply/audit",
                },
            }
        },
        mounted() {
            this.initDictConfig()
        },
        computed: {
            showSelectArea: function() {
                let state = true;
                let userInfo = this.$store.getters.userInfo
                if (userInfo.provinceCode && userInfo.cityCode && userInfo.areaCode) {
                    state = false;
                }
                return state
            }
        },
        methods: {
            initConfig : function(){
                for (let i in this.queryParam){
                    this.queryParam[i] = '';
                }
                // 获取到用户登陆的信息
                let userInfo = this.$store.getters.userInfo;
                if(userInfo.cityCode){
                    this.queryParam['cityCode'] = userInfo.cityCode;
                }
                if(userInfo.areaCode){
                    this.queryParam['areaCode'] = userInfo.areaCode;
                }
                this.queryParam['applyStatus'] = '0';

                let ref = this.$refs.selectAreaRef;
                if(ref && ref.clearSelectArea != undefined){
                    ref.clearSelectArea();
                }

                this.queryParam.creatTimeBegin = new Date().MonthFirstDay()
                this.queryParam.creatTimeEnd = new Date().MonthLastDay()
                this.rangeTime = [this.queryParam.creatTimeBegin, this.queryParam.creatTimeEnd]
            },
            async initDictConfig() {
                this.initConfig();
                await this.setColumns()
            },
            resetForm: function() {
                this.initConfig()
                this.searchQuery()
            },
            handleDateChange(value, dateString) {
                this.rangeTime = dateString
                if (dateString[0]) {
                    this.queryParam.creatTimeBegin = dateString[0]
                }
                if (dateString[1]) {
                    this.queryParam.creatTimeEnd = dateString[1]
                }
            },
            async changeArea({ area, city }) {
                if (city) {
                    this.queryParam.cityCode = city
                }
                if (area) {
                    this.queryParam.areaCode = area
                }
            },
            searchQuery: function() {
                this.loadData(1)
            },
            showModal(row,name) {
                this.modelName = name;
                this.visible = true;
                this.editData = row;
            },
            handleCancel(e) {
                this.modelName = null;
                this.visible = false;
                this.editData = null;
                this.remark = '';
            },
            async handleOk(state = 1) {
                if (state == 2 && this.remark == '') {
                    this.$message.warn('请填写【信息核实未通过】的原因！')
                    return
                }
                let params = {
                    id: this.editData.id,
                    applyStatus: state,
                    optionResult: this.remark || ''
                }
                let res = await putAction(this.url.audit, params)
                if (res && res.success) {
                    this.editData = null;
                    this.visible = false;
                    this.remark = '';
                    this.$message.success(res.message || '提交成功')
                    this.searchQuery()
                } else {
                    this.$message.warn(res.message || '提交失败')
                }
            },
            // 设置表格头部信息
            setColumns() {
                this.columns = [
                    {
                        title: '序号',
                        dataIndex: 'id',
                        key: 'rowIndex',
                        width: 60,
                        align: 'center',
                        scopedSlots: { customRender: 'htmlSlot' },
                        customRender: (text, row, index) => {
                            return parseInt(index) + 1
                        }
                    },
                    {
                        title: '机构名称',
                        align: 'center',
                        dataIndex: 'customerName',
                        key: 'customerName'
                    },
                    {
                        title:'联系人',
                        align:"center",
                        dataIndex: 'contract'
                    },
                    {
                        title:'联系电话',
                        align:"center",
                        dataIndex: 'phone'
                    },
                    {
                        title:'申请类型',
                        align:"center",
                        dataIndex: 'applyType',
                        scopedSlots: { customRender: 'htmlSlot' },
                        customRender: function(value, row, index) {
                            const obj = {
                                children: '-',
                                attrs: {}
                            }
                            if (value == 0) {
                                obj['children'] = <span style = 'color:orange;' >暂停营业申请</span>
                            } else if (value == 1) {
                                obj['children'] = <span style = 'color:deepskyblue;' >恢复营业申请</span>
                            }
                            return obj
                        }
                    },
                    {
                        title:'申请时间',
                        align:"center",
                        dataIndex: 'createTime'
                    },
                    {
                        title:'执行状态',
                        align:"center",
                        dataIndex: 'applyStatus',
                        scopedSlots: { customRender: 'htmlSlot' },
                        customRender: function(value, row, index) {
                            const obj = {
                                children: '-',
                                attrs: {}
                            }
                            if (value == 0) {
                                obj['children'] = <span style = 'color:#a5e311;' >待执行</span>
                            } else if (value == 1) {
                                obj['children'] = <span style = 'color:#057cf5;' >执行通过</span>
                            } else if (value == 2) {
                                obj['children'] = <span style = 'color:#e9b82e;' >执行未通过</span>
                            }
                            return obj
                        }
                    },
                    {
                        title:'开始时间',
                        align:"center",
                        dataIndex: 'startDate',
                    },
                    {
                        title:'结束时间',
                        align:"center",
                        dataIndex: 'endDate',
                    },
                    // {
                    //     title:'申请理由',
                    //     dataIndex: 'applyReamrk',
                    //     width : '50px'
                    // },
                    // {
                    //     title:'申请人',
                    //     align:"center",
                    //     dataIndex: 'applyUserName'
                    // },
                    {
                        title: '机构地址',
                        dataIndex: 'province',
                        key: 'province',
                        customRender: (text, row, index) => {
                            return `${row.province || ''}${row.city || ''}${row.area || ''}`
                        }
                    },
                    {
                        title:'执行人',
                        align:"center",
                        dataIndex: 'optionUserName'
                    },
                    {
                        title:'执行时间',
                        align:"center",
                        dataIndex: 'optionDate',
                    },
                    // {
                    //     title:'执行结果',
                    //     align:"center",
                    //     dataIndex: 'optionResult',
                    // },
                    {
                        title: '操作',
                        dataIndex: 'action',
                        align: 'center',
                        width: 147,
                        scopedSlots: { customRender: 'action' }
                    }
                ]
            },
        }
    }
</script>
<style scoped>
    @import '~@assets/less/common.less';
</style>
